<!DOCTYPE html>
<html>

<head>
    <%layout("/WEB-INF/view/common/inc/admin_head.html",{title:'权限选择', styles:'bootstrap,animate,style,bootstrap-table,ztree,font-awesome'}){}%>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" href="#tab-1" aria-expanded="true">菜单</a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#tab-2" aria-expanded="false"> 普通权限</a>
                    </li>
                    <!--<li class="">
                        <a data-toggle="tab" href="#tab-3" aria-expanded="false">操作</a>
                    </li>-->
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <ul id="menutree" class="ztree"></ul>
                            <p class="text-info" style="margin-top: 30px;">注:选择或取消选择后数据自动保存</p>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <!-- START 数据表格 -->
                            <table id="powerpermissiontable"
                                   data-toolbar="#toolbar"
                                   data-side-pagination="server"
                                   data-pagination="true"
                                   data-resizable="true"
                                   data-side-pagination="server"
                                   data-url="${ctxPath}/power/permission/findall.do"
                                   data-page-size="100">
                            </table>
                            <!-- END 数据表格 -->
                        </div>
                    </div>
                    <!--<div id="tab-3" class="tab-pane">
                        <div class="panel-body">
                            <strong>即将到来...</strong>
                        </div>
                    </div>-->
                </div>


            </div>
        </div>

    </div>
</div>


<%layout("/WEB-INF/view/common/inc/admin_js.html",{modules:'jquery,bootstrap,bootstrap-table,bootstrap-table-zh-CN,layer,ztree,ztree-excheck'}){}%>

<script>
    var $powerpermissiontable = $('#powerpermissiontable'),selections=[],treeObj;
    $(function(){

        //START 普通权限表格配置
        $powerpermissiontable.bootstrapTable({
            height: getHeight(),
            columns: [
                {
                    field: 'state',
                    checkbox: true,
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '编号',
                    field: 'id',
                    align: 'left',
                    valign: 'middle',
                    visible: false
                },
                {
                    title: '权限名称',
                    field: 'permissionName',
                    align: 'left',
                    valign: 'middle'
                },
                {
                    title: '权限编码',
                    field: 'permissionCode',
                    align: 'left',
                    valign: 'middle',
                    sortable: true
                },
                {
                    title: '排序号',
                    field: 'orderId',
                    align: 'left',
                    valign: 'middle',
                    sortable: true
                }
            ],
            onLoadSuccess : function(){
                //设置已绑定的权限
                $powerpermissiontable.bootstrapTable("checkBy", {field:"id", values:[<%for(permission in bindpermissions){ if( permission.permissionType == 0 ){ print(permission.id);if(!permissionLP.last){print(",");} } }%>]});

            }
        });
        //END 普通权限表格配置

        //普通权限选中 取消事件监听
        $powerpermissiontable.on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
            $.post('${ctxPath}/power/permission/saverelrolepermission.do',{ids:getIdSelections().join(','),rid:${roleid}},function(data){
               if( data && data.ok ){
                   layer.msg(data.msg,{icon: 1,time: 1500});
               }else {
                   layer.msg(data.msg,{icon: 0,time: 1500});
               }
            });
        });


        //菜单树初始化
        var setting = {
            callback: {
                onCheck: checkMenu
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            view: {
                showIcon: false,
                nameIsHTML: true
            }
        };
        var zNodes =[
        <%;
        for(menu in menus){
            if( menuLP.first ){
                print("{ id:"+menu.id+", pId:"+menu.menuPid+", name:\"<i class='fa "+menu.menuIcon+"'></i>&nbsp;"+menu.menuName+"\",pmid:"+menu.powerPermission.id!"-1"+", open:true }");
            }else{
                print("{ id:"+menu.id+", pId:"+menu.menuPid+", name:\"<i class='fa "+menu.menuIcon+"'></i>&nbsp;"+menu.menuName+"\",pmid:"+menu.powerPermission.id!"0"+" }");
            }
            if( !menuLP.last ){print(",");}
        }
        %>
        ]
        treeObj = $.fn.zTree.init($("#menutree"), setting, zNodes);

        var bindmenus = [<%for(permission in bindpermissions){ if( permission.permissionType == 1|| permission.permissionType == 2 ){ print(permission.privilegeId);if(!permissionLP.last){print(",");} } }%>];

        for(i = 0; i < bindmenus.length; i++){
            var node = treeObj.getNodeByParam("id", bindmenus[i], null);
            if( node ){
                treeObj.checkNode(node,true,false);
            }
        }

        //表格高度自适应
        $(window).resize(function () {
            $powerpermissiontable.bootstrapTable('resetView', {
                height: getHeight()
            });
        });
    });

    //菜单选中事件
    function checkMenu(event, treeId, treeNode) {
        layer.load();
        //发送绑定请求
        $.post('${ctxPath}/power/permission/saverelrolepermission.do',{ids:getTreeSelections().join(','),rid:${roleid}},function(data){
            if( data && data.ok ){
                layer.msg(data.msg,{icon: 1,time: 1500});
            }else {
                layer.msg(data.msg,{icon: 0,time: 1500});
            }
            layer.closeAll('loading');
        });

    }

    //获取表格选中的ID
    function getIdSelections() {
        return $.map($powerpermissiontable.bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }

    //获取菜单树选中的ID
    function getTreeSelections() {
        return $.map(treeObj.getCheckedNodes(true), function (node) {
            return node.pmid;
        });
    }

    //表格高度计算
    function getHeight() {
        return $(window).height() - $('.btn-group').outerHeight(true) - $('.breadcrumb').outerHeight(true) - 120;
    }
</script>
</body>

</html>

